<!doctype html>
<html class="no-js">
<script src="../js/head.js"></script>
<body>
<script src="../js/header.js"></script>
<div class="am-cf admin-main">
    <!-- sidebar start -->
    <script src="../js/sidebar.js"></script>
    <!-- sidebar end -->

    <!-- content start -->
    <div class="admin-content" id="content-body">
        <div class="admin-content-body">
            <div class="am-cf am-padding am-padding-bottom-0">
                <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">部门信息</strong>
                </div>
            </div>

            <hr>
            <table id="dg" title="部门" class="easyui-datagrid" style="width:auto"
                   toolbar="#toolbar" pagination="true"
                   rownumbers="true" fitColumns="true" singleSelect="true" data-options="fit:true,fitColumns:true">
                <thead>
                <tr>
                    <th field="id" width="50" sortable="true">部门编号</th>
                    <th field="name" width="50">部门名</th>
                    <th field="managerName" width="50">部门经理</th>
                    <th field="memo" width="50">备注</th>
                </tr>
                </thead>
            </table>
            <div id="toolbar">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true"
                   onclick="newUser()" id="add">新增</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true"
                   onclick="editUser()" id="edit">修改</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
                   onclick="destroyUser()" id="delete">删除</a>

                <form class="form-inline" id="searchForm">
                    <div class="form-group">
                        部门编号:
                        <input type="number" class="easyui-textbox" name="id" validType="length[0,20]">
                    </div>
                    <div class="form-group">
                        部门名称:
                        <input id="name" type="text" class="easyui-textbox" name="name" validType="length[0,20]">
                    </div>
                    <div class="form-group">
                        部门经理:
                        <input class="easyui-combobox" name="manager" style="width:auto;height:26px;"
                               data-options="
                            valueField:'id',
                            textField:'name',
                            url:'../employee?rows=100000',
                            method:'get',
                            loadFilter: function (data){
                                return data.result.list;
                            }" editable="false">
                    </div>
                    <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="departmentSearch()">查询</a>
                </form>
            </div>

            <div id="dlg" class="easyui-dialog" style="width:400px"
                 closed="true" buttons="#dlg-buttons">
                <form id="fm" novalidate style="margin:0;padding:20px 50px">
                    <div style="margin-bottom:20px;font-size:14px;border-bottom:1px solid #ccc">部门信息</div>
                    <div class="form-group" hidden>
                        部门编号:
                        <input type="number" class="easyui-textbox" name="id" data-options="" validType="length[0,20]">
                    </div>
                    <div class="form-group">
                        部门名称:
                        <input type="text" class="easyui-textbox" name="name" validType="length[0,20]">
                    </div>
                    <div class="form-group">
                        部门经理:
                        <input class="easyui-combobox" name="manager" style="width:auto;height:26px;"
                               data-options="
                            valueField:'id',
                            textField:'name',
                            url:'../employee?rows=100000',
                            method:'get',
                            loadFilter: function (data){
                                return data.result.list;
                            }" editable="false">
                    </div>
                    <div class="form-group">
                        备注:　　
                        <input type="text" class="easyui-textbox" name="memo" validType="length[0,255]">
                    </div>
                </form>
            </div>
            <div id="dlg-buttons">
                <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()"
                   style="width:90px">保存</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel"
                   onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
            </div>
        </div>
        <script src="../js/footer.js"></script>
    </div>
    <!-- content end -->
</div>

<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
   data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

<script src="../js/util.js"></script>
<script>

    var method;
    function newUser() {
        $('#dlg').dialog('open').dialog('center').dialog('setTitle', '新增');
        $('#fm').form('clear');
        method = "post";
    }
    function editUser() {
        var row = $('#dg').datagrid('getSelected');
        if (row) {
            $('#dlg').dialog('open').dialog('center').dialog('setTitle', '修改');
            $('#fm').form('load', row);
            method = "put";
        }
    }
    function saveUser() {
        $.ajax({
            type: method,
            dataType: 'json',
            url: '../department',
            data: JSON.form2param($('#fm').serializeArray()),
            success: function (result) {
                if (result.success) {
                    $('#dlg').dialog('close');        // close the dialog
                    $('#dg').datagrid('reload');    // reload the user data
                } else {
                    $.messager.show({    // show error message
                        title: 'Error',
                        msg: result.message
                    });
                }
            }
        });
    }
    function destroyUser() {
        var row = $('#dg').datagrid('getSelected');
        if (row) {
            $.messager.confirm('确认', '确认删除该条记录？', function (r) {
                if (r) {
                    $.ajax({
                        type: 'delete',
                        dataType: 'json',
                        contentType: 'application/json',
                        async: false,
                        url: '../department?id=' + row.id,
                        success: function (result) {
                            if (result.success) {
                                $('#dg').datagrid('reload');    // reload the user data
                            } else {
                                $.messager.show({    // show error message
                                    title: 'Error',
                                    msg: result.message
                                });
                            }
                        }
                    });
                }
            });
        }
    }

    function departmentSearch() {
        if ($("#searchForm").form('validate')) {
            var jsondata = JSON.form2param($('#searchForm').serializeArray());
            $('#dg').datagrid('load', jsondata);
        }
    }
    $(function () {
        $.extend($.fn.validatebox.defaults.rules, {
            maxLength: {
                validator: function(value, param){
                    return param[0] >= value.length;
                },
                message: '请输入最多 {0} 字符.'
            }
        });
        $("#dg").datagrid({
            url: "../department",
            method: 'get',

            loadFilter: function (data) {
                return {
                    "total": data.result.total,
                    "rows": data.result.list
                }
            }
        });

        if(current.job != 0){
            $('#add').hide()
            $('#edit').hide()
            $('#delete').hide()
        }
    });
    $.extend($.fn.validatebox.defaults.rules, {
        lengthAndRange: {
            validator: function(value, param){
                var value = $.trim(value);
                return value.length >= param[0] && value.length <= param[1] && value >= param[2];
            },
            message: 'Please enter at least {0} characters and less than {1} characters, larger than {2}.'
        },
        length: {
            validator: function(value, param){
                var value = $.trim(value);
                return value.length >= param[0] && value.length <= param[1];
            },
            message: 'Please enter at least {0} characters and less than {1} characters.'
        },
        dateBefore:{
            validator: function(value, param){
                var end = $('#end').datebox('getValue');
                console.debug("end date:"+end);
                if (end){
                    return value <= end;
                }
                else{
                    return true;
                }
            },
            message: 'Please enter a valid date.'
        },
        dateAfter:{
            validator: function(value, param){
                var start = $('#start').datebox('getValue');
                console.debug("start date:"+end);
                if (end){
                    return value >= start;
                }
                else{
                    return true;
                }
            },
            message: 'Please enter a valid date.'
        }

    });
</script>
</body>
</html>
